<template>
    <div class="cardComputeView" :style="carStyle" @mouseover="hoverCard = true" @mouseout="hoverCard = false">
        <div v-if="!showContent" class="defaultText">请在右侧配置数据</div>
        <template v-else>
            <button class="btn_dashed" @click="dialogFormVisible = true">查&nbsp;询</button>
            <i v-if="!isEdit && hoverCard" @click.prevent="cardFullScreen" class="cardfullScreen iconfont icon-quanping"
                @mousemove="hoverCard = true"></i>
            <div class="lineTitle" v-if="obj.isShowTitle" :style="titleStyle">{{ obj.title }}</div>
        </template>
        <div class="chart" ref="constat" :style="canvasStyle" @click="gotoUrl(obj)"></div>

        <!-- 筛选弹窗 -->
        <el-dialog width="550px" title="查询数据" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
            append-to-body>
            <el-form ref="formRef" class="dialog-from-margin" :rules="rules" status-icon :model="filterForm"
                label-position="left" label-width="60px">
                <el-form-item label="类型：" prop="sortType">
                    <el-radio v-model="filterForm.sortType" label="1">最新</el-radio>
                    <el-radio v-model="filterForm.sortType" label="2">历史</el-radio>
                </el-form-item>
                <el-form-item label="范围：" prop="dateTime" v-if="filterForm.sortType == 2">
                    <el-date-picker size="small" v-model="filterForm.dateTime" type="daterange" value-format="yyyy-MM-dd"
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="filterData()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// import { cardDataLoad, boardLoad } from '@/api/share'
import moment from "moment"

export default {
    Name: "LineBarMixin",
    components: {
        echarts
    },
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        setIndex: Function,
        gotoUrl: {
            type: Function,
            default: function () { }
        }
    },
    data() {
        var checkDatetime = (rule, value, callback) => {
            if (this.filterForm.sortType == "2" && !value) {
                callback(new Error("请选择时间范围"));
            } else {
                callback();
            }
        };
        return {
            showContent: false,
            carStyle: {},
            titleStyle: {},
            canvasStyle: {
                width: "100%",
                height: "100%"
            },
            chart: undefined,
            filterForm: {
                pageInfo: {
                    pageSize: 999,
                    page: 1,
                    totalCount: 0
                },
                tableId: 0,
                structureIds: [],
                beginTime: undefined,
                endTime: undefined,
                sortType: "1",
                dateTime: "",
                // 新增参数
                isOnlie: false,
                // cacheType: 2,
            },
            rules: { dateTime: [{ validator: checkDatetime, trigger: "blur" }], },
            // 用于比对数据是否修改
            dataStr: "",
            dialogFormVisible: false,
            timer: null,
            hoverCard: false,
            isFullScreen: false,
            // echart数据对象
            xData: [],  //x轴数据列表
            yColumns: [],  // y轴名称列表
            serverData: [], // 数据对象列表
        }
    },
    mounted() {
        this.setStyle();

        this.$nextTick(function () {
            this.reloadInfo();
        })

        this.dataStr = JSON.stringify(this.obj.tableData);

        // 页面变化调整尺寸
        var self = this;
        window.addEventListener('resize', function () {
            // self.chart.resize();
            self.setStyle();
        }, true);
    },
    beforeDestroy() {
        clearInterval(this.timer)
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null;
    },
    methods: {
        // 除样式外其他数据更改调用刷新
        reloadInfo() {
            // 重绘
            if (this.chart) {
                this.chart.dispose()
            }
            var constat = this.$refs.constat;
            this.chart = echarts.init(constat);

            clearInterval(this.timer);

            // #region
            // var beginTime = "";
            // var endTime = "";
            const end = new Date();
            const start = new Date();

            // if (this.obj.tableData.filterTimeType == 99) {
            //     beginTime = undefined;
            //     endTime = undefined;
            // }
            // else if (this.obj.tableData.filterTimeType > 0) {
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * this.obj.tableData.filterTimeType);
            //     beginTime = this.parseTime(start, "{y}-{m}-{d}");
            //     endTime = this.parseTime(end);
            // } else if (this.obj.tableData.filterTimeType == 0) {
            //     beginTime = undefined;
            //     endTime = undefined;
            // } else {
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
            //     beginTime = this.parseTime(start, "{y}-{m}-{d}");
            //     endTime = this.parseTime(end);
            // }
            // this.filterForm.beginTime = beginTime;
            // this.filterForm.endTime = endTime;

            // #*********# 硬件表不读取缓存 / 非硬件表默认读取缓存
            // 缓存读取数据
            if (this.obj.tableData.type == 0) {
                this.filterForm.isOnlie = true;

                // 查询一天内数据
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                this.filterForm.beginTime = this.parseTime(start);
                this.filterForm.endTime = this.parseTime(end);
            } else {
                this.filterForm.isOnlie = false;

                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                this.filterForm.beginTime = this.parseTime(start, "{y}-{m}-{d}");
                this.filterForm.endTime = this.parseTime(end);
            }

            // 第一次请求
            this.getLineData((dataResult) => {
                this.resultDataToObject(dataResult);
                this.setOptions();

                // 循环刷新
                this.timedRefresh();
            });
        },
        // 数据转换
        resultDataToObject(dataResult) {
            var xData = [];
            var serveData = [];
            var columns = [];

            if (dataResult.dataList && dataResult.columns) {
                var dataList = dataResult.dataList.reverse();
                dataResult.columns.forEach((x, j) => {
                    if (j > 0) {
                        columns.push(x.name)
                    }
                })

                for (var i = 0; i < dataResult.dataList[0].length; i++) {
                    var data = [];
                    dataList.forEach((x, j) => {
                        // 显示百分比值
                        if (this.obj.tableData.valueType == 1) {
                            data.push(x[i] * 100);
                        } else {
                            data.push(x[i]);
                        }
                    });
                    if (i == 0) {
                        xData = data;
                    } else {
                        var line = this.obj.tableData.barList[i - 1];
                        serveData.push(Object.assign({}, line, { data }));
                    }
                }
            }

            this.xData = xData;
            this.yColumns = columns;
            this.serverData = serveData;
        },
        // 定时刷新
        timedRefresh() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            // 刷新时间兼容处理
            if (this.obj.tableData.type == 1 && timeSize < 60) {
                timeSize = 60;
            }

            if (this.isReload) {
                this.timer = setInterval(() => {
                    const end = new Date();
                    this.filterForm.endTime = this.parseTime(end);

                    this.getLineData((dataResult) => {
                        this.resultDataToObject(dataResult);
                        this.setOptions();
                        //     if (dataResult.dataList && dataResult.columns) {
                        //         var xData = self.xData;
                        //         var serveData = self.serverData;
                        //         var columns = self.yColumns;
                        //         var dataList = dataResult.dataList.reverse();
                        //         // var dataList = [
                        //         //     [self.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"), Math.random() * 9],
                        //         //     [self.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"), Math.random() * 9],
                        //         // ]
                        //         for (var i = 0; i < dataList[0].length; i++) {
                        //             var data = [];
                        //             dataList.forEach((x, j) => {
                        //                 // 显示百分比值
                        //                 if (self.obj.tableData.valueType == 1) {
                        //                     data.push(x[i] * 100);
                        //                 } else {
                        //                     data.push(x[i]);
                        //                 }
                        //             });
                        //             if (i == 0) {
                        //                 if (xData.length > data.length) {
                        //                     xData = xData.slice(data.length)
                        //                 }
                        //                 xData = xData.concat(data);
                        //             } else {
                        //                 var arr = serveData[i - 1].data;
                        //                 if (arr.length > data.length) {
                        //                     arr = arr.slice(data.length);
                        //                 }
                        //                 serveData[i - 1].data = arr.concat(data);
                        //             }
                        //         }
                        //         self.xData = xData;
                        //         self.yColumns = columns;
                        //         self.serverData = serveData;

                        //         self.setOptions();
                        //     }
                    });
                }, timeSize * 1000);
            }
        },
        cardFullScreen() {
            if (this.isFullScreen) {
                this.isFullScreen = false;
                this.setStyle();
            } else {
                this.carStyle.top = 0;
                this.carStyle.left = 0;
                this.carStyle.right = 0;
                // this.carStyle.zIndex = 666;
                this.carStyle.bottom = 0;
                this.carStyle.position = 'fixed';
                this.canvasStyle.width = "100%";
                this.canvasStyle.height = "100%";
                if (!this.carStyle.backgroundColor || this.carStyle.backgroundColor == 'rgba(0, 0, 0, 0)') {
                    this.carStyle.backgroundColor = "#04142b";
                }
                // this.chart.resize({
                //     width: "100%",
                //     height: "100%",
                // });

                this.$nextTick(() => {
                    // this.chart.resize();
                    this.chart.resize({
                        width: document.body.clientWidth + "px",
                        height: document.body.clientHeight + "px",
                    });
                })

                this.isFullScreen = true;
            }

            this.$emit('setIndex')
        },
        filterData() {
            var self = this;
            this.$refs["formRef"].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false;
                    if (this.filterForm.sortType == 1) {
                        this.reloadInfo();
                        // this.filterForm.beginTime = undefined;
                        // this.filterForm.endTime = undefined;

                        // this.getLineData((dataResult) => {
                        //     self.resultDataToObject(dataResult);
                        //     self.setOptions();
                        //     // 循环刷新
                        //     self.timedRefresh();
                        // });
                    } else {
                        clearInterval(this.timer);

                        this.filterForm.beginTime = this.filterForm.dateTime[0];
                        this.filterForm.endTime = this.filterForm.dateTime[1];
                        this.filterForm.isOnlie = false;

                        this.getLineData((dataResult) => {
                            self.resultDataToObject(dataResult);
                            self.setOptions();
                        });
                    }
                }
            });
        },
        setStyle() {
            if (this.isFullScreen) return false;
            var self = this;
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
            }

            // 标题隐藏显示
            var isShowTitle = this.obj.isShowTitle ? true : false;
            var echarHeight = style.height;
            var echarMarginTop = 0;
            if (isShowTitle) {
                echarHeight = style.height - style.fontSize - style.borderWidth * 2;
                echarMarginTop = style.fontSize + "px";
            }

            this.canvasStyle = {
                marginTop: echarMarginTop,
                width: "100%",
                height: echarHeight + "px",
            }

            if (this.chart) {
                this.chart.resize({
                    width: style.width,
                    height: echarHeight,
                });
            }
        },
        setOptions() {
            var self = this;
            var seriesData = [];

            let expectedData = this.xData;
            let columns = this.yColumns;
            let actualData = this.serverData;

            if (!actualData.length) {
                this.chart.clear();
                return false;
            }

            // 颜色相关
            var color = "#333333";
            if (this.obj.tableData.color) {
                color = this.obj.tableData.color;
            }
            var lineColor = "#eeeeee"
            if (this.obj.tableData.lineColor) {
                lineColor = this.obj.tableData.lineColor;
            }

            // 设置y轴范围
            if (this.obj.tableData.isSetTranslate) {
                var minSize = 0;
                var maxSize = 100;
                if (this.obj.tableData.minSize) {
                    minSize = this.obj.tableData.minSize;
                    // minSize = this.obj.tableData.minSize - 0.5;
                }
                if (this.obj.tableData.maxSize) {
                    maxSize = this.obj.tableData.maxSize;
                    // maxSize = this.obj.tableData.maxSize + 0.5;
                }
            } else {
                var minSize = undefined;
                var maxSize = undefined;
            }
            // 自定义颜色
            // var newColors = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'];
            var newColors = [];
            this.obj.tableData.barList.forEach(e => {
                if (e.color) {
                    newColors.push(e.color);
                }
            });
            // console.log(newColors);
            // newColors = newColors.concat(colors);
            //    console.log(columns);
            var self = this;
            actualData.forEach((x, i) => {
                var type = "bar";
                if (x.type == 1) {
                    type = "line";
                }

                // 判断是否显示折线图的圆点
                var isShowSymbol = 5;
                if (x.isShowSymbol == false) {
                    isShowSymbol = 1;
                }

                var data = {
                    name: columns[i],
                    smooth: x.isSmooth ? x.isSmooth : false,
                    type: type,
                    data: x.data,
                    animationDuration: 1000,
                    animationEasing: 'cubicInOut',
                    lineStyle: {
                        width: 1,
                    },
                    label: {
                        show: this.obj.tableData.isShowValue,
                        formatter: function (a, b, c) {
                            if (a.value != null && self.obj.tableData.decimal >= 0) {
                                // 显示百分比值
                                if (self.obj.tableData.valueType == 1) {
                                    return Number(a.value).toFixed(self.obj.tableData.decimal) + "%";
                                }

                                return Number(a.value).toFixed(self.obj.tableData.decimal);
                            }
                            return a.value;
                        },
                        position: this.obj.tableData.isZong ? 'right' : 'top',
                        color: color
                    },
                    symbol: 'circle',     //设定为实心点
                    symbolSize: isShowSymbol,   //设定实心点的大小
                    // showSymbol: false,
                    itemStyle: {
                        color: x.color
                    }
                };

                if (!self.obj.tableData.isZong && self.obj.tableData.isShowRightY && self.obj.tableData.rightColumeId) {
                    if (x.id == self.obj.tableData.rightColumeId) {
                        data.yAxisIndex = 1;
                    }
                }

                // 设置渐变
                if (x.isAreaColor) {
                    // 纵向显示
                    if (self.obj.tableData.isZong) {
                        // 折线图渐变
                        data.areaStyle = {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: x.color  // 0% 处的颜色
                                }, {
                                    offset: 1, color: x.areaColor ? x.areaColor : x.color
                                }],
                                global: false // 缺省为 false
                            }
                        }
                        // 柱状图渐变
                        data.itemStyle = {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: x.color },
                                { offset: 1, color: x.areaColor ? x.areaColor : x.color }
                            ])
                        }
                    } else {
                        // 折线图渐变
                        data.areaStyle = {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: x.color  // 0% 处的颜色
                                }, {
                                    offset: 1, color: x.areaColor ? x.areaColor : x.color
                                }],
                                global: false // 缺省为 false
                            }
                        }
                        // 柱状图渐变
                        data.itemStyle = {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: x.color },
                                { offset: 1, color: x.areaColor ? x.areaColor : x.color }
                            ])
                        }
                    }
                }

                seriesData.push(data);
            });

            // console.log(seriesData)

            var yaxis = {};
            var xaxis = {};
            if (this.obj.tableData.isZong) {
                yaxis = {
                    data: expectedData.map(function (str) {
                        if (!isNaN(Date.parse(str)) && Date.parse(str) > 631152000000) {
                            return moment(str).format("YYYY/MM/DD") + "\n" + moment(str).format("HH:mm:ss")
                        }
                        return str;
                    }),
                    axisLabel: {
                        // interval: 10,
                        color: color,
                        rotate: 45,
                    },
                    axisLine: {
                        lineStyle: {
                            color: lineColor
                        },
                    },
                };
                xaxis = {
                    name: self.obj.tableData.valueType == 1 ? '%' : '',
                    nameLocation: "start",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: color
                        }
                    },
                    splitLine: {
                        show: this.obj.tableData.isShowGrid,
                        lineStyle: {
                            color: lineColor,
                            width: 1,
                        }
                    },
                    min: minSize,
                    max: maxSize,
                };
            } else {
                xaxis = {
                    data: expectedData.map(function (str) {
                        if (!isNaN(Date.parse(str)) && Date.parse(str) > 631152000000) {
                            return moment(str).format("YYYY/MM/DD") + "\n" + moment(str).format("HH:mm:ss")
                        }
                        return str;
                    }),
                    axisLabel: {
                        // interval: 10,
                        color: color,
                        // rotate: 45,
                    },
                    axisLine: {
                        lineStyle: {
                            color: lineColor
                        },
                    },

                };
                if (this.obj.tableData.isShowRightY && this.obj.tableData.rightColumeId) {
                    yaxis = [{
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: color
                            }
                        },
                        splitLine: {
                            show: this.obj.tableData.isShowGrid,
                            lineStyle: {
                                color: lineColor,
                                width: 1,
                            }
                        },
                        min: minSize,
                        max: maxSize,
                    },
                    {
                        position: 'right',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: color
                            }
                        },
                        splitLine: {
                            show: this.obj.tableData.isShowGrid,
                            lineStyle: {
                                color: lineColor,
                                width: 1,
                            }
                        },
                    }
                        // , {
                        //     type: 'value',
                        //     position: 'right',
                        //     alignTicks: true,
                        //     axisLine: {
                        //         show: true,
                        //         lineStyle: {
                        //             color: color
                        //         }
                        //     },
                        //     axisLabel: {
                        //         formatter: '{value} ml'
                        //     }
                        // }
                    ];
                } else {
                    yaxis = {
                        name: self.obj.tableData.valueType == 1 ? '%' : '',
                        nameLocation: "start",
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: color,
                            }
                        },
                        splitLine: {
                            show: this.obj.tableData.isShowGrid,
                            lineStyle: {
                                color: lineColor,
                                width: 1,
                            }
                        },
                        min: minSize,
                        max: maxSize,
                    };
                }
            }

            this.chart.setOption({
                // dataZoom: [
                //     {
                //         type: 'inside',
                //         start: 0,
                //         end: 10
                //     },
                //     {
                //         start: 0,
                //         end: 10
                //     }
                // ],
                color: newColors,
                xAxis: xaxis,
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: 20,
                    top: "60px",
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0,0,0, .7)",
                    textStyle: {
                        color: "#ffffff"
                    },
                    // formatter: function(param){
                    //     console.log(param)
                    // }
                },
                yAxis: yaxis,
                legend: {
                    data: columns,
                    // itemHeight: 12,
                    // itemWidth: 12,
                    // icon: 'circle',
                    top: "25px",
                    left: "15px",
                    textStyle: {
                        color: color
                    },
                    show: this.obj.tableData.isShowLegend,
                },
                series: seriesData,
                // series: [{
                //     name: 'expected',
                //     // itemStyle: {
                //     //     normal: {
                //     //         color: '#FF005A',
                //     //         lineStyle: {
                //     //             color: '#FF005A',
                //     //             width: 2
                //     //         }
                //     //     }
                //     // },
                //     smooth: true,
                //     type: 'line',
                //     data: expectedData,
                //     animationDuration: 2800,
                //     animationEasing: 'cubicInOut',
                //     label: {
                //         show: true
                //     },
                // },
                // {
                //     data: actualData,
                //     name: 'actual',
                //     type: 'bar',
                //     label: {
                //         show: true
                //     },
                //     barWidth: '20%',
                // },
                // {
                //     data: expectedData,
                //     type: 'bar',
                //     label: {
                //         show: true
                //     },
                //     barWidth: '20%',
                // }
                //     // {
                //     //     name: 'actual',
                //     //     smooth: true,
                //     //     type: 'line',
                //     //     itemStyle: {
                //     //         normal: {
                //     //             color: '#3888fa',
                //     //             lineStyle: {
                //     //                 color: '#3888fa',
                //     //                 width: 2
                //     //             },
                //     //         }
                //     //     },
                //     //     data: actualData,
                //     //     animationDuration: 2800,
                //     //     animationEasing: 'quadraticOut',
                //     //     label: {
                //     //         show: this.obj.tableData.isShowValue
                //     //     },
                //     // }
                // ]
            })
        },
        setDefaultOptions() {
            // #region 系列颜色
            var color = "#333333";
            if (this.obj.tableData.color) {
                color = this.obj.tableData.color;
            }
            var lineColor = "#eeeeee"
            if (this.obj.tableData.lineColor) {
                lineColor = this.obj.tableData.lineColor;
            }
            // #endregion

            this.chart.setOption({
                grid: {
                    left: "4%",
                    right: "4%",
                    top: "60px",
                    bottom: "20px",
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['Evaporation', 'Precipitation', 'Temperature'],
                    top: "25px",
                    left: "15px",
                    show: this.obj.tableData.isShowLegend,
                    textStyle: {
                        color: color
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            color: color,
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} ml',
                            color: color,
                        },
                        splitLine: {
                            show: this.obj.tableData.isShowGrid,
                            lineStyle: {
                                color: lineColor,
                                width: 1,
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: 'Evaporation',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                        ]
                    },
                    {
                        name: 'Precipitation',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: [
                            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        ]
                    },
                    {
                        name: 'Temperature',
                        type: 'line',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        data: [20.0, 20.2, 30.3, 40.5, 60.3, 100.2, 200.3, 230.4, 230.0, 160.5, 120.0, 60.2]
                    }
                ]
            });
        },
        getLineData(callback) {
            // #region 没有配置数据显示默认内容
            if (!this.obj.tableData.tableId) {
                this.showContent = true;

                this.setDefaultOptions();
                return false;
            }
            // #endregion

            // #region 参数不完整
            var idlist = [this.obj.tableData.xId];
            if (this.obj.tableData.barList.length == 0) {
                this.showContent = false;
                return false;
            }
            this.obj.tableData.barList.forEach(e => {
                if (e.id) {
                    idlist.push(e.id);
                }
            });
            if (idlist.length - 1 != this.obj.tableData.barList.length) {
                this.showContent = false;
                return false;
            }
            // #endregion

            this.showContent = true;

            this.filterForm.tableId = this.obj.tableData.tableId;
            this.filterForm.pageInfo.pageSize = this.obj.tableData.count;
            var idlist = [this.obj.tableData.xId];
            this.obj.tableData.barList.forEach(e => {
                if (e.id) {
                    idlist.push(e.id);
                }
            });
            if (this.obj.tableData.yId) {
                idlist.push(this.obj.tableData.yId);
            }

            this.filterForm.structureIds = idlist;
            if (this.obj.tableData.type != 1) {
                cardDataLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {
                        // if (!res.data.data.dataResult.columns || !res.data.data.dataResult.columns.length) {
                        //     // this.$message.error("筛选范围内没有数据");
                        //     return false;
                        // }

                        if (callback) {
                            callback(res.data.data.dataResult);
                        }
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            } else {
                boardLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {
                        // if (!res.data.data.dataResult.columns || !res.data.data.dataResult.columns.length) {
                        //     // this.$message.error("筛选范围内没有数据");
                        //     return false;
                        // }

                        if (callback) {
                            callback(res.data.data.dataResult);
                        }
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            }
        },
        // 日期筛选触发查询函数
        dateSearch(beginTime, endTime) {
            clearInterval(this.timer);
            var self = this;
            this.filterForm.beginTime = beginTime;
            this.filterForm.endTime = endTime;
            this.filterForm.isOnlie = false;

            this.getLineData((dataResult) => {
                self.resultDataToObject(dataResult);
                self.setOptions();
            });
        },
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.setStyle();

                // 数据改变了 动态更新echart
                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    this.reloadInfo();
                }
            },
            deep: true,  // 深度监听
        }
    },
}
</script>